<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>第一课</title>

  <!-- style标记表示定义页面样式的区域 -->
  <style>
    
    
    /*   
      定义样式的格式：
      .类名称 {
        样式的属性名称:属性的值;
        ...
      }
      
    */
    .c1 {
      /* 
        background-color是背景色，color是前景色
        #红绿蓝 各两位数组成,数字的取值范围是0-f
      
      */
      background-color: #ff0000;
      color: #ffffff;
    }

    .c2 {
      background-color: #0000ff;
      color: #ffffff;
    }
  </style>

</head>

<body>

  <div class="c2"> 黑暗骑士 </div>
  第二行 <span style="color: #de082c;">毫无效果</span><span>毫无效果</span>

  <hr>

  <div class="c1">
    背景颜色
  </div>


</body>

</html>